<template>
    <section class="content">
        <navbar :title="$t('h_title.baobiao_tixian')" :right_show="false" :type="2" :left_text="$t('h_title.shouye')" ref="navbar"></navbar>
        <jilvTop @fun_tian="fun_tian"></jilvTop>
        <section class="jilv-cont">
            <h5 v-if="list.length <= 0">{{$t('common.zanwujilv')}}</h5>
            <section id="jilv-content" v-else>
                <h6>{{$t('jilv.tixianchenggong')}}:<span>$ {{total}}</span></h6>
                <section class="jilv-content">
                    <article class="top">
                        <span>{{$t('jilv.cunkuan_tab[0]')}}</span>
                        <span>{{$t('jilv.cunkuan_tab[1]')}}</span>
                        <span>{{$t('jilv.cunkuan_tab[2]')}}</span>
                    </article>
                    <article v-for="item in list">
                        <span>+{{item.money}}元</span>
                        <span :class="item.status == '3'?'error':''">{{$t('common.baobiao_status['+item.status+']')}}</span>
                        <span>{{item.created_at}}</span>
                    </article>

                </section>
                <van-pagination
                        v-model="currentPage"
                        :page-count = pageCount
                        :show-page-size="5"
                        force-ellipses
                        @change="fun_change"
                />
            </section>
        </section>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    import jilvTop from "@/components/jilv-top"
    import { Pagination } from 'vant'
    export default {
        name: "baobiao_cunkuang",
        components: {
            navbar,
            jilvTop,
            [Pagination.name]: Pagination
        },
        data(){
            return {
                currentPage:1, //当前页
                pageCount: 1, //总页
                tianshu: 1,
                list:[],
                day: 1,
				total:0
            }
        },
        mounted() {
            this.onLoad()
        },
        methods: {
            fun_tian(int){
                this.day = int
                this.onLoad()
            },
            fun_change() {  //点击分页
                this.onLoad()
            },
            onLoad() {
                this.$https.fetchGet('/m/drawing_record',{'page': this.currentPage, 'day': this.day}).then(res => {
                    let data = res.data.data
                    this.list = data.data
					this.total = res.data.total
                    this.pageCount = data.last_page
                })
            }
        }
    }
</script>

<style scoped lang="less">
.jilv-cont{
    padding-top: 2.3rem;
    color: #fff;
    background-color: #eee;
    height: calc(100vh - 1.2rem);
    h5{
        font-size: .36rem;
        padding: .4rem;
        color: #5d5353;
        font-weight: normal;
    }
    #jilv-content{
        background-color: #fff;
        color: #636b6f;
        text-align: left;
        padding-bottom: .1rem;
        h6{
            font-weight: normal;
            padding: .2rem .5rem;
            font-size: .4rem;
            border-bottom: 1px solid #E5E5E5;
            span{
                color: #140BF8;
                font-size: .7rem;
                position: relative;
                top: .1rem;
                margin-left: .3rem;
            }
        }
        .jilv-content{
            article{
                font-size: .36rem;
                display: flex;
                align-items: center;
                text-align: center;
                margin-bottom: .3rem;
                &.top{
                    line-height: .9rem;
                    span:nth-child(2){
                        color: #636b6f;
                    }
                }
                span{
                 &:nth-child(1){
                     width: 30%;
                 }
                 &:nth-child(2){
                     width: 40%;
                     color: #20a53a;
                 }
                 &:nth-child(3){
                     width: 30%;
                 }
                }
            }
        }
    }
}
</style>
